<script setup>
import {ref} from "vue";
const props = defineProps({
  data: {type: Array, required: true}
})
const emit = defineEmits(['onItemClick'])
const state = ref({
  currentHover: 0,
})
const clickItem = (item) => {
  emit('onItemClick', item.caseId)
}
</script>
<!--案例展示 内部-->
<template>
  <view class="container grid">
    <view class="grid column" v-for="(item, i) in props.data" :key="i" :style="{animationDelay:`${0.3*(i+1)}s`}"
          @mouseenter="state.currentHover = i;" @mouseleave="state.currentHover = -1" @click="clickItem(item)">
      <img :src="item.img" width="100%" alt=""
           :class="{active: state.currentHover === i}">
      <view class="column text" :class="{active: state.currentHover === i}">
        <view class="font26">{{ item.title }}</view>
        <view class="font26" style="margin-top: 20px;">{{ item.subTitle }}</view>
      </view>
    </view>
  </view>
</template>

<style scoped>
.container {
  grid-template-columns: repeat(3, 33.33%);

  .grid {
    overflow: hidden;
    cursor: pointer;
    opacity: 0;
    animation: bottomFadeIn 1s ease-in-out forwards;

    img {
      scale: 1;
      transition: all .3s ease 0.1s;

      &.active {
        transform: scale(1.2, 1.2);
        opacity: 0.3;
      }
    }

    .text {
      width: 100%;
      height: calc(100vw * (1772 / 1920) / 4);
      text-align: center;
      position: absolute;
      opacity: 0;
      justify-content: center;

      &.active {
        opacity: 1;
        animation-name: fadeIn;
        animation-duration: 1.5s;
      }
    }
  }
}
</style>